<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background-color: #f3f3f3;
        }
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #e593b0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .text {
            margin-left: 20px;
            color: #fff;
        }
        header .avatar {
            margin-right: 20px;
        }
        header>span {
            display: none;
        }
        /* 中间内容部分 */
        .wrapper {
            width: 100%;
            height: 100%;
            overflow-y: auto;
        }
        .wrapper .item {
            display: flex;
            height: 120px;
        }
        .wrapper .item .avatar {
            margin-top: 20px;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .wrapper .content {
            width: calc(100% - 160px);
            margin-top: 20px;
            height: 80px;
            border-radius: 8px;
            background-color: #ffa096;
            padding: 12px;
            box-sizing: border-box;
        }
        .wrapper .placeholder {
            width: 80px;
        }
        .wrapper .robot .content {
            background-color: rgb(235, 111, 136);
        }
        .user .content {
            display: flex;
            justify-content: flex-end;
        }
        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            background-color: #fff;
        }
        footer .container {
            height: 100%;
            margin: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        footer .container input {
            width: 200px;
            height: 30px;
            flex: 1;
            margin: 0 40px;
            padding: 8px;
            box-sizing: border-box;
            outline: none;
            border-radius: 4px;
        }
        footer .container button {
            width: 50px;
            height: 30px;
            border-radius: 4px;
            background-color: #ffa096;
            color: #fff;
        }
    </style>
</head>
<body>
    <audio autoplay controls src=""></audio>
    <header>
        <div class="text">小思同学</div>
        <span class="loading">对方正在讲话中...</span>
        <div class="avatar">
            <img src="./img/person01.png" alt="">
        </div>
    </header>
    <div class="wrapper">
        <!-- <div class="item robot">
            <div class="avatar">
                <img src="./img/person01.png" alt="">
            </div>
            <div class="content">
                <div class="text">cdfdf</div>
            </div>
            <div class="placeholder"></div>
        </div>
        <div class="item user">
            <div class="placeholder"></div>
            <div class="content">
                <div class="text">cdfdfvfcghnjgkhgf</div>
            </div>
            <div class="avatar">
                <img src="./img/person02.png" alt="">
            </div>
        </div> -->
    </div>
    <footer>
        <div class="container">
            <div class="avatar">
                <img src="./img/person02.png" alt="">
            </div>
            <input type="text" placeholder="说点什么吧..." class="input-box">
            <button class="send">发送</button>
        </div>
    </footer>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../lib/jQuery.min.js"></script>
    <script>
        // 发送按钮点击事件
        const url = 'http://www.liulongbin.top:3006/api/robot';
        $('.send').on('click', () => {
            // 显示loading
            $('.loading').show();
            // 去input的值 去除两端空格
            const inpValue = $('.input-box').val().trim();

            // 不允许发送空白信息
            if (!inpValue) {
                return;
            }
            const el = $(` 
                        <div class="item user">
                            <div class="placeholder"></div>
                            <div class="content">
                                <div class="text">${inpValue}</div>
                            </div>
                            <div class="avatar">
                                <img src="./img/person02.png" alt="">
                            </div>
                        </div>`);
            // 把新建的消息元素放入容器
            el.appendTo($('.wrapper'));
            $('.input-box').val('');
            // 处理滚动条
            $('.wrapper').scrollTop(99999);
            // $('.wrapper').scrollTop = $('item')[0].scrollHeight;

            // 获取机器人的回复
            axios({
                method: 'get',
                url,
                params: {
                    spoken: inpValue,
                }
            }).then((res) => {
                // 显示loading
                $('.loading').hide();
                // 将接口返回的值放入消息模板
                console.log(res.data.data.info.text);
                const el = $(`
                    <div class="item robot">
                        <div class="avatar">
                            <img src="./img/person01.png" alt="">
                        </div>
                        <div class="content">
                            <div class="text">${res.data.data.info.text}</div>
                        </div>
                        <div class="placeholder"></div>
                    </div>
                `);
                el.appendTo($('.wrapper'));
                // 处理滚动条
                $('.wrapper').scrollTop(99999);
                // 获取语音地址
                axios({
                    method: 'get',
                    url: 'http://www.liulongbin.top:3006/api/synthesize',
                    params: {
                        text: res.data.data.info.text,
                    }
                }).then((res) => {
                    // 换audio标签的地址（换地址可以触发自动播放功能）
                    $('audio').attr({ src: res.data.voiceUrl });
                })
            }).catch((err) => {
                    // 隐藏loading
                    $('.loading').hide();
                    // 失败提示
                    alert('发送失败');
            })
        })
        // 按回车发送信息
        $('.input-box').on('keyup', function (e) {
            if (e.keyCode === 13) {
                $('.send').trigger('click');
            };
        })
    </script>
</body>
</html>